<template>
    <!-- 类型选择 ，根据不同类型展示不同内容-->
    <a-radio-group v-model:value="article.type">
        <a-radio-button value="0" @click="changeinte0">普通</a-radio-button>
        <a-radio-button value="1" @click="changeinte1">悬赏</a-radio-button>
        <a-radio-button value="2" @click="changeinte2">积分内容</a-radio-button>     
    </a-radio-group>
        <!-- 积分内容 -->
        <div v-show="inte1">
        <br>积分值
        <a-input-number id="inputNumber" v-model:value="article.intenum" :min="1" :max="30" />
        <br/>
          <div>积分内容</div>
          <a-textarea
          v-model:value="article.inte"
          placeholder="Autosize height with minimum and maximum number of lines"
          :auto-size="{ minRows: 3, maxRows: 5 }"
        />
        </div>
        <!-- 悬赏贴 -->
        <div v-show="inte2">
          <br>积分值
          <a-input-number id="inputNumber" v-model:value="article.intenum" :min="1" :max="30" />
          <br/>
        </div>
  <!-- 标签选择 -->
  <br/>
      <a-select
      v-model:value="tabs.tabs"
      mode="tags"
      style="width: 100%"
      placeholder="输入标签"
      :options="tagoption"
      @change="handleChange"
      ></a-select>
  <!-- 新建标签 -->
  <br/>
  
    <NewTabs @ok="getTagoption"></NewTabs>
    <br />
  <!-- 选择分区 -->
    <a-select
    ref="select"
    v-model:value="article.area"
    style="width: 120px"
    :options="area"
    @change="handleChange1"
    ></a-select>
  <!-- 标题，正文 -->
  <br />
  <div id="app" style="z-index: 0">
    <div ref="articleRef" :model="article">
      <a-row :gutter="8">
        <a-col :span="14">
          <a-input
            v-model:value="article.a_title"
            placeholder="请输入文章标题"
          />
        </a-col>     
        <a-col :span="5">
          <a-radio-button @click="publish">发布文章</a-radio-button>
        </a-col> 
      </a-row> 
      <br />
      <!-- 子组件将会在这里渲染出来  指定初始化的数据，以及监听数据更新的事件 --> 
      <div v-if="publishedArticle.a_html != null">
          <wang-editor
            @editorContent="getEditorContent"
            :a_html="publishedArticle.a_html"
          />
        </div>
         <div v-else>
          <wang-editor @editorContent="getEditorContent" />
        </div>
    </div>
    <br />
  </div>
</template>

<script setup>
import {reactive,ref,onMounted,nextTick,toRefs,defineComponent} from "vue";
//引入自定义插件
import WangEditor from "@/components/wangeditor1.vue";
import NewTabs from './NewTabs.vue'
//引入自定义封装的函数或对象
import { get, post, tip } from "@/common";  
//路由
import { useRouter ,useRoute} from "vue-router";
//属性
    const router = useRouter(); 
    const useroute = useRoute();//获取路由器
    const articleRef = ref(null);
    //文章分区
    const articlearea=ref({
        id:"",
        area:"",
    });
    //已发布的文章内容
    // const publishedArticle = ref({
    //   postId:"52",
    //   id:"12",
    // });
    console.log(useRoute().query.articleid)
    const publishedArticle = ref({
      postId:useRoute().query.articleid,
    });
    //文章内容
    const article = ref({
      a_title: "",
      a_html: "",
      num: "1",//版本号
      id:"",
      postId:"",
      area:"",
      state:"1",
      inte:"",
      intenum:"",
      type:"0",
    });
    //内容分区
    const area = ref([{
      value: '0',
      label: '学习',
    }, {
      value: '1',
      label: '美食',
    }, {
      value: '2',
      label: '闲置',
    }, {
      value: '3',
      label: '活动',
    },{
      value: '4',
      label: '灌水',
    }]);
    //根据类型显示内容
    const inte1=ref(false);
    const inte2=ref(false); 
    //文章标签
    const tabs=ref({
      tabs:[],
      postId:"",
    }); 
    //标签显示
    const tagoption = ref([
      { value: "", label: "" },
      { value: "", label: "" },
    ]);

//方法
    const publish = () => {
      //then方法仅接收成功操作的结果
      console.log(article.value);
      post("/post/republish/", article.value).then((res) => {
        article.value = res.data;
        console.log(article.value);
        tip.success("文章发布成功！");
        //将js对象转换为json对象存放到session
        sessionStorage.setItem("postId", article.value.postId);
        // router.push({ path: "/tabpost" });
        // window.location.href = "/tabpost";
        //确定标签
        //确定tabs的postid，文章和Id绑定
        tabs.value.postId=article.value.postId;
        post("/post/addtabs", tabs.value).then((res) => {
      });
      });
    };
    //获取历史版本
    const getPublishedAriticle = () => {
      post("/post/getPublishedAriticle/" ,publishedArticle.value).then((res) => {       
        article.value = res.data;
        publishedArticle.value = res.data;
        console.log('getPublishedAriticle' + publishedArticle.value);
      });
    };
    getPublishedAriticle(); 
    //不知何意
    const getEditorContent = (data) => {
      // 获取编辑器内容
      article.value.a_html = data;
    };
    //填充tagoption
    const getTagoption = () => {
      post("/post/selectalltabs").then((res) => {
        var tmps2 = [];
        for (let i = 0; i < res.data.length; i++) {
          var tmp2 = { value: "", label: "" };
          tmp2.value = res.data[i].id;
          tmp2.label = res.data[i].name;
          tmps2.push(tmp2);
          // console.log(tmps2);
        }
        tagoption.value = tmps2;
        // console.log(tagoption.value);
      })
      .catch((err) => {
        console.log(err);
      })
    };
    getTagoption();

    //类型选择
    const changeinte0=()=>{
        inte1.value=false;
        inte2.value=false;
    };
    const changeinte1=()=>{
      inte1.value=true;
      inte2.value=false;
    };
    const changeinte2=()=>{
      inte1.value=false;
      inte2.value=true;
    };

</script>
